<template>
	<div class="neirong">
		<!--------------导航栏-------->
		<div class="wrapper" ref="wrapper">
			<ul class="content" >
				<li v-for="(item,index) in this.$store.state.list" @click="tab(item,index)" :class="{active:item.e_name==get}">{{item.name}}</li>
			</ul>
			<i class="iconfont icon-guifanjiahao" @click="addshow()"></i>
			<div class="xiegang"></div>
		</div>
		<!-------添加频道--------->
		<div :class="{jiazai:is,jiazaiback:not}" >
			<div class="dingbu">
				<span class="title">
					<a href="">频道管理</a>
				</span>
				<span class="backBtn" @click="backhome()">
					<a></a>
				</span>
			</div>
		    <div class="delete">
		    	<p>点击删除以下频道</p>
		    	<ul class="controlDetail" @click="delete_add($event)">
		    		<li v-for="(item,index) in $store.state.list" >
		    			<a href="javascript:void(0)" >{{item.name}}</a>
		    		</li>
		    	</ul>
		    </div>
		    <div class="delete">
		    	<p v-if="$store.state.add_list.length>4">点击添加以下频道</p>
		    	<p class="red_show" v-else>最多16个频道，请先删除一些</p>
		    	<ul class="controlDetail" @click="add_add($event)">
		    		<li v-for="(item,index) in $store.state.add_list">
		    			<a href="javascript:void(0)" >{{item.name}}</a>
		    		</li>
		    	</ul>
		    	
		    </div>
		</div>
	</div>
</template>

<script>
	export default{
	data(){
		return {
			is:true,
			not:true,
//			active:'active',
		}	
	},
	computed:{
		get:function(){
			return this.$route.query.name
		}
	},
	mounted(){
		this.$store.commit('has')
		if(this.$route.path=="/"){
			this.$router.push({
				name:'recommend',
				query:{
					name:'message',
					id:0
				}
			});
			this.$store.commit('first_init',{
					url:"/message"
				})
			this.num = 0
			}else{
				var l_url = this.$route.query.name;
				this.$store.commit('first_init',{
					url:l_url
				})
			}
	},
	methods:{
		tab(item,index){
			this.$store.commit('recover')
			document.scrollingElement.scrollTop=0
			this.num = index;
			this.$router.push({
				name:'recommend',
				query:{
					name:item.e_name,
					id:item.num
				}
			})
			var c_url = this.$route.query.name
			this.$store.commit('first_init',{
				url:c_url
			})
		},
		addshow(){
			this.not=false
		},
		backhome(){
			this.not=!this.not
		},
		delete_add(e){
			var that=this;
			var navList=this.$store.state.list;
			if(e.target.nodeName.toLocaleLowerCase()=="a"&&e.target.innerText!="推荐"){
				navList.forEach(function(el,index){
					if(el.name==e.target.innerText){
						if(el.e_name==that.$route.query.name){
							that.name = "recommend"
//							console.log(that.name)
							that.$router.push({
								name:that.name,
								query:{
									name:"message",
									id:0,
								}
							})
							that.$store.commit('first_init',{
								url:"message",
							})
						}
						that.$store.state.add_list.push(navList[index])
						that.$store.state.list.splice(index,1)
						localStorage.setItem("navList",JSON.stringify(navList))
						localStorage.setItem("add_navList",JSON.stringify(that.$store.state.add_list))
					}
				})
			}
		},
		add_add(e){
			var that = this;
			var add_navList = this.$store.state.add_list;
			add_navList.forEach(function(el,index){
				if(el.name==e.target.innerText){
					if(add_navList.length>4){
						that.$store.state.list.push(add_navList[index])
						that.$store.state.add_list.splice(index,1)
						localStorage.setItem("add_navList",JSON.stringify(add_navList))
						localStorage.setItem("navList",JSON.stringify(that.$store.state.list))
					}
				}
			})
		}
	},
	
}
</script>

<style lang="scss" scoped>
	@import "~@/assets/scss/nav";
	@import "~@/assets/scss/iconfont";
	@import "~@/assets/scss/add";
	.active{
		color: #f85959!important;
	}
	.red_show{
		color:red;
	}
	.jiazai{
		z-index: 40;
	}
</style>